<template>
  <div class="header-bar" :style="{opacity}">
    <span class="iconfont pos-icon">&#xe61f;</span>
    <p class="address">北京理工大学国防科技园2号楼10层北京理工大学国防科技园2号楼10层北京理工大学国防科技园2号楼10层工大学国防科技园2号楼10层北京理工大学国防科技园2号楼10层</p>
    <span class="iconfont">&#xe7c4;</span>
  </div>
</template>
<script>
export default {
  props: {
    scrollY: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      opacity: 1
    }
  },
  watch: {
    scrollY (val) {
      this.opacity = 1 - (val / 160)
    }
  }
}
</script>
<style lang = "scss" scoped>
.header-bar {
  display: flex;
  align-items: center;
  padding: 16px 11px;
  background: red;
  .iconfont {
    font-size: 22px;
    color: #fff;
  }
  .pos-icon {
    margin-right: 10px;
    color: #fff;
  }
  .address {
    flex-grow: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px;
    color: #fff;
  }
}
</style>
